﻿<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/global.css">
    <link rel="stylesheet" href="./css/index.css">
    <script src="./js/flexible.js"></script>
    <style>
        body {
            background-color: #efeff4;
        }
        
        .top {
            height: 1.72rem;
            background-color: #5485a2;
            padding: 0 .4rem;
        }
        
        .top img {
            width: 100%;
        }
        
        .top .zhong {
            color: white;
            font-size: .56rem;
            font-weight: 100
        }
        
        .top ul {
            display: flex;
            justify-content: space-between;
            margin: .3067rem 0;
        }
        
        .top .zuo {
            width: 2.3333rem;
            height: .8533rem;
        }
        
        .top .you {
            width: 2.3333rem;
            height: .8533rem;
            border: solid .0267rem #6591ab;
            background-color: #4b7791;
            border-radius: .5333rem;
            display: flex;
            justify-content: space-around;
            text-align: center;
        }
        
        .top .you #tuoyuan2 {
            width: .48rem;
            height: .16rem;
            padding-top: .32rem;
        }
        
        .top .you #juxing1 {
            width: .0267rem;
            height: 38px;
        }
        
        .top .you #tuoyuan1 {
            width: .48rem;
            height: .48rem;
        }
        
        .top .you img {
            padding-top: .1733rem;
        }
        
        .input {
            background-color: white;
            padding: 0 .4rem;
        }
        
        .input input {
            height: 1.1733rem;
            margin-left: .1867rem;
            width: 7.52rem;
            border-right: solid .0133rem #e5e5e5;
            font-size: .4rem;
        }
        
        .input .tuoyuan3box {
            float: right;
            padding: .2667rem 0;
            /* text-align: center; */
            /* width: 1.5467rem;
            height: 1.1733rem; */
        }
        
        .input #fangdajing {
            width: .4133rem;
            height: .4133rem;
        }
        
        .input #tuoyuan3 {
            width: .7467rem;
            height: .64rem;
        }
        
        .lunbotu img {
            width: 10rem;
            height: 5.3333rem;
        }
        
        .fenlei {
            height: 1.8133rem;
            background-color: white;
            font-size: .3067rem;
            color: #9b9b9b;
            margin-bottom: .2667rem;
        }
        
        .fenlei ul {
            display: flex;
            justify-content: space-around;
        }
        
        .fenlei ul li {
            text-align: center;
            padding: .333rem 0;
        }
        
        .fenlei ul li img {
            margin-bottom: .0667rem;
        }
        
        .fenlei ul #fenleiimg {
            width: .64rem;
            height: .76rem;
        }
        
        .fenlei ul #fenleiimg1 {
            width: .2533rem;
            height: .7467rem;
        }
        
        .fenlei ul #fenleiimg2 {
            width: .76rem;
            height: .7733rem;
        }
        
        .fenlei ul #fenleiimg3 {
            width: .6133rem;
            height: .5733rem;
            margin: .12rem 0;
        }
        
        .biaoti {
            background-color: white;
        }
        /* ////////////////////////////////////////////////////////////// */
        /* .jingxuantuijian {
            background-color: white;
            display: flex;
            justify-content: center;
            width: 100%;
        } */
        /* //////////////////////////////////////////////////////////////// */
        
        .gjr {
            display: flex;
            justify-content: center;
        }
        /* .jingxuantuijian img {
            width: 5rem;
            height: 4rem;
        }
         */
        
        .biaoti {
            height: 1.0667rem;
            align-items: center;
            line-height: 1.0667rem;
            display: flex;
            justify-content: space-around;
            color: #767676;
            font-weight: 600;
            padding: .4533rem 0;
        }
        /* .shangping {
            width: 50%;
            border-right: solid #b8b8b8 1px;
            border-left: solid #b8b8b8 1px;
            border-bottom: solid #b8b8b8 1px;
            display: flex;
            justify-content: space-between;
        }
        
        .shangping .douyiyang p {
            margin: .2667rem 0;
            font-size: .32rem;
            text-align: center;
            /* border-right: solid #b8b8b8 1px;
            /* border-left: solid #b8b8b8 1px; */
        /* } */
        /* .shangping .douyiyang h3 s {
            font-weight: 200;
            font-size: .2rem;
            color: #b8b8b8;
        } */
        
        .gjr {
            display: flex;
            justify-content: center;
        }
        
        .shangping {
            width: 50%;
            border-right: solid #b8b8b8 1px;
            border-left: solid #b8b8b8 1px;
            border-bottom: solid #b8b8b8 1px;
            display: flex;
            justify-content: space-between;
        }
        
        .shangping .douyiyang p {
            margin: .2667rem 0;
            font-size: .32rem;
            text-align: center;
            /* border-right: solid #b8b8b8 1px;
            border-left: solid #b8b8b8 1px; */
        }
        
        .shangping .douyiyang img {
            width: 4.96rem;
        }
        
        .shangping .douyiyang h3 s {
            font-weight: 200;
            font-size: .2rem;
            color: #b8b8b8;
        }
        
        .dibu {
            position: fixed;
            bottom: 0rem;
            width: 10rem;
            height: 1.3067rem;
            background-color: white;
            border-top: 1px #d4dadd solid;
            padding: 0 1.1333rem;
        }
        
        .dibu ul {
            margin-top: .1333rem;
            display: flex;
            justify-content: space-between;
        }
        
        .dibu ul li {
            text-align: center;
        }
        
        .dibu img {
            width: .6133rem;
            height: .6133rem;
        }
        
        .dibu ul li .shouye {
            color: #62c0ee;
        }
    </style>
</head>

<body>
    <div class="top"><img src="./images/Path.png" alt="">
        <ul>
            <li class="zuo"></li>
            <li class="zhong">奈商城</li>
            <li class="you">
                <img id="tuoyuan2" src="./images/椭圆 2.png" alt="">
                <img id="juxing1" src="./images/矩形 2.png" alt="">
                <img id="tuoyuan1" src="./images/椭圆 1.png" alt="">
            </li>
        </ul>
    </div>
    <div class="input"><img id="fangdajing" src="./images/Ellipse 1.png" alt=""><input placeholder="请输入你要搜索的宝贝.." type="text">
        <div class="tuoyuan3box"><img id="tuoyuan3" src="./images/椭圆 3.png" alt=""></div>
    </div>
    <div class="lunbotu"><img src="./images/图层 9.png" alt=""></div>
    <div class="fenlei">
        <ul>
            <li><img id="fenleiimg" src="./images/矢量智能对象.png" alt="">
                <p>菲茨</p>
            </li>
            <li><img id="fenleiimg1" src=" ./images/矢量智能对象-1.png " alt=" ">
                <p>克奈圃</p>
            </li>
            <li><img id="fenleiimg2" src="./images/矢量智能对象-2.png" alt="">
                <p>服装</p>
            </li>
            <li>
                <img id="fenleiimg3" src=" ./images/矢量智能对象-3.png " alt=" ">
                <p>其他</p>
            </li>
        </ul>
    </div>
    <div class="biaoti">
        <p>精选推荐</p>
    </div>
    <div class="jingxuantuijian">
        <div class="gjr">
            <div class="shangping">
                <div class="douyiyang">
                    <img src="./images/图层 10.png" alt="">
                    <p>莫次有机PWE活性美白洗面奶</p>
                    <h3>￥&nbsp;169 <s>220</s></h3>
                </div>

            </div>
            <div class="shangping">
                <div class="douyiyang">
                    <img src="./images/图层 10.png" alt="">
                    <p>莫次有机PWE活性美白洗面奶</p>
                    <h3>￥&nbsp;169 <s>220</s></h3>
                </div>

            </div>
        </div>
        <div class="gjr">
            <div class="shangping">
                <div class="douyiyang">
                    <img src="./images/图层 10.png" alt="">
                    <p>莫次有机PWE活性美白洗面奶</p>
                    <h3>￥&nbsp;169 <s>220</s></h3>
                </div>

            </div>
            <div class="shangping">
                <div class="douyiyang">
                    <img src="./images/图层 10.png" alt="">
                    <p>莫次有机PWE活性美白洗面奶</p>
                    <h3>￥&nbsp;169 <s>220</s></h3>
                </div>

            </div>
        </div>

        <div class="gjr">
            <div class="shangping">
                <div class="douyiyang">
                    <img src="./images/图层 10.png" alt="">
                    <p>莫次有机PWE活性美白洗面奶</p>
                    <h3>￥&nbsp;169 <s>220</s></h3>
                </div>

            </div>
            <div class="shangping">
                <div class="douyiyang">
                    <img src="./images/图层 10.png" alt="">
                    <p>莫次有机PWE活性美白洗面奶</p>
                    <h3>￥&nbsp;169 <s>220</s></h3>
                </div>

            </div>
        </div>

        <div class="gjr">
            <div class="shangping">
                <div class="douyiyang">
                    <img src="./images/图层 10.png" alt="">
                    <p>莫次有机PWE活性美白洗面奶</p>
                    <h3>￥&nbsp;169 <s>220</s></h3>
                </div>

            </div>
            <div class="shangping">
                <div class="douyiyang">
                    <img src="./images/图层 10.png" alt="">
                    <p>莫次有机PWE活性美白洗面奶</p>
                    <h3>￥&nbsp;169 <s>220</s></h3>
                </div>

            </div>
        </div>

        <div class="gjr">
            <div class="shangping">
                <div class="douyiyang">
                    <img src="./images/图层 10.png" alt="">
                    <p>莫次有机PWE活性美白洗面奶</p>
                    <h3>￥&nbsp;169 <s>220</s></h3>
                </div>

            </div>
            <div class="shangping">
                <div class="douyiyang">
                    <img src="./images/图层 10.png" alt="">
                    <p>莫次有机PWE活性美白洗面奶</p>
                    <h3>￥&nbsp;169 <s>220</s></h3>
                </div>

            </div>
        </div>

        <div class="dibu">
            <ul>
                <li><img src="./images/首页-选中.png" alt="">
                    <p class="shouye">首页</p>
                </li>
                <li><img src="./images/购物车.png" alt="">
                    <p>购物车</p>
                </li>
                <li><img src="./images/我的.png" alt="">
                    <p>我的</p>
                </li>
            </ul>
        </div>
</body>

</html>